<template>
    <label :class="classes">
        <input type="radio" :value="vValue" @change="onChange" :disabled="disabled" :checked="typeof radioValue=='boolean'?radioValue:vValue==modelValue">
        <span :class="[prefixCls+'-radio-inner']"></span>
        <span :class="[prefixCls+'-radio-text']"><slot/></span>
    </label>
</template>
<script>
import { prefixCls } from '../prefix'

export default {
    name: `${prefixCls}Radio`,
    data(){
        return {
            prefixCls: prefixCls,
            radioValue: this.modelValue,
            vValue: this.value
        }
    },
    model: {
        prop: 'modelValue',
        event: 'change'
    },
    props: {
        modelValue: {},
        disabled: {
            type: Boolean,
            default: false
        },
        value: {},
    },
    computed: {
        classes() {
            const { radioValue, vValue, modelValue, disabled} = this
            return [
                `${prefixCls}-radio-box`,
                {
                    'checked':typeof radioValue == 'boolean' ? radioValue : vValue == modelValue,
                    'disabled': disabled
                }
            ]
        }
    },
    watch:{
        modelValue(v) {
            this.radioValue = v
        },
        value(v) {
            this.vValue = v
        }
    },
    methods: {
        onChange(){
            let v;
            const { value } = this
            if(typeof value === 'undefined' || value === '' || value === null) {
                v = this.modelValue ? this.modelValue : true
            } else {
                v = this.value
            }
            this.vValue = v;
            this.$emit('change', v);
        },
        _radioValue(){
            const { value } = this
            if(typeof value === 'undefined' || value === '' || value === null) {
                if (this.modelValue) {
                    this.vValue = this.modelValue;
                } else {
                    // this.$emit('change', false);
                }
            }
        }
    },
    mounted(){
        this._radioValue();
    },
}
</script>